import React, {Component} from 'react';
import {StatusBar, StyleSheet, Text, TextInput, ToastAndroid, View, Alert} from 'react-native';
import * as Color from "../../../lib.xjs/constant/Color";
import HttpHelper from "../../../lib.xjs/helper/HttpHelper";
import BizUser from "../../entity/BizUser";
import * as BizConstant from "../../constant/BizContant";
import {UUID} from "../../../lib.xjs/util/UUID";
import TouchButton from "../../../lib.xjs/widget/btn/HighlightButton";
import {NumberUtil} from "../../../lib.xjs/util/NumberUtil";

/** 用户充值 */
export default class PersonCharge extends Component {

    mUserId;

    /** 当前金额 */
    mUserCurrBalance;

    /** 金额变化量 */
    mChargeMoney = 10;

    static navigationOptions = ({navigation}) => ({
        title: `${navigation.state.params.personName}`,
    });

    constructor(props){
        super(props);
        this.state = {};

        this.mUserId            = this.props.navigation.state.params.personId;
        this.mUserCurrBalance   = this.props.navigation.state.params.currBalance;
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar
                    hidden={false}
                    translucent={false}
                    backgroundColor={Color.colorPrimaryDark}/>

                <View style={styles.horizontal_gap}/>

                <View style={styles.content}>
                    <View style={styles.content_title}>
                        <View style={{height: '80%', width:8, backgroundColor: Color.colorPrimaryLight, marginRight: 15,}}/>
                        <Text style={{fontSize: 18}}>虚拟充值</Text>
                    </View>

                    <View style={styles.content_title_charge}>
                        <Text style={{color: Color.black, marginHorizontal: 15, fontSize: 40}}>¥</Text>
                        <TextInput
                            style={{fontSize: 18, width: '100%'}}
                            underlineColorAndroid={'transparent'}
                            onChangeText={(text) => {
                                this.mChargeMoney = text;
                            }}
                            maxLength={3}
                            keyboardType="numeric"
                            placeholder={'当前余额:' + this.mUserCurrBalance + '元'} />
                    </View>
                </View>

                <View style={styles.horizontal_gap}/>

                <View style={{paddingHorizontal: 5,}}>
                    <TouchButton styleTouch={styles.buttonTouch} underlayColor={Color.colorPrimaryDark} styleText={styles.buttonText} title={'充值'} onPress={()=> this._doCharge()}/>
                </View>

                <HttpHelper ref={'http'}/>
            </View>
        );
    }

    /** 虚拟充值 */
    _doCharge():void{
        if (!this.refs.http) return;
        if (!NumberUtil.isAllDigital(this.mChargeMoney)) {
            ToastAndroid.show("输入有误:" + this.mChargeMoney, ToastAndroid.SHORT);
            return;
        }

        let head = BizUser.getHeadParam(true);
        let body = new Map();
        body.set("targetUserId", this.mUserId);
        body.set("deltaBalance", this.mChargeMoney);

        this.refs.http.setURL(BizConstant.GET_VICE_CHARGE)
            .setMethod(HttpHelper.GET)
            .setNotiInfo("正在充值")
            .setHeadParams(head)
            .setBodyParams(body)
            .setRequestId(UUID.getOne())
            .setListener((responseCode: number, res: Object) => {
                if (responseCode !== HttpHelper.RESPONSE_SUCCESS) return;
                // ToastAndroid.show('充值成功', ToastAndroid.SHORT);
                Alert.alert(
                    '提示',
                    '充值成功',
                    [
                        {text: '确定',    onPress: () => { this.props.navigation.pop() } },
                    ],
                    { cancelable: false }
                );
            })
            .setTimeout(10 * 1000)
            .start(false);
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        flexDirection:'column',
    },

    content: {
        flexDirection:'column',
        backgroundColor:Color.windowWhite,
        padding: 5,
    },

    content_title: {
        height: 25,
        flexDirection:'row',
        alignItems: 'center',
    },

    content_title_charge: {
        width: '100%',
        marginTop: 10,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'flex-end',
    },

    horizontal_gap: {
        height: 10,
        backgroundColor:Color.lightMoreGray,
    },

    buttonTouch: {
        width: "100%",
        height: 50,
        backgroundColor:Color.colorPrimary,
    },

    buttonText: {
        fontSize: 22,
        color:Color.white,
    },
});
